import React from 'react'
import {withRouter,Link,} from 'react-router-dom'
import './AIplan.css'

import PlanABg from '../../res/images/web/AIPlan/翻倍盈利计划备份.png'
import PlanBBg from '../../res/images/web/AIPlan/打包盈利计划备份.png'
import GoBackLayout from "../../layouts/GoBackLayout/GoBackLayout";
import {WingBlank} from "antd-mobile";
import TabWithCustomUnderline from "../../layouts/TabWithCustomUnderline/TabWithCustomUnderline";
import AIPlanList from "./AIPlanList/AIPlanList";


const planMapper = {

    'A': {

        bgUrl: PlanABg,
        title: '翻倍盈利计划',
        desc: '每个方案精选3场比赛',
        add: '方案亏损则退还本方案所花费金币到余额',
        infoPath: './plan-attention/A',

        plans: [
            {
                date: '2020第一期',
                status: true,
                price: 1560,
                category: '大小球',
                policy: '不中包退',
                games: '意甲+足协杯+英超',
            },

            {
                date: '2020第一期',
                status: true,
                price: 1560,
                category: '大小球',
                policy: '不中包退',
                games: '意甲+足协杯+英超',
            },

            {
                date: '2020第一期',
                status: true,
                price: 1560,
                category: '大小球',
                policy: '不中包退',
                games: '意甲+足协杯+英超',
            },

            {
                date: '2020第一期',
                status: false,
                price: 1560,
                category: '大小球',
                policy: '不中包退',
                games: '意甲+足协杯+英超',
            },

            {
                date: '2020第一期',
                status: false,
                price: 1560,
                category: '大小球',
                policy: '不中包退',
                games: '意甲+足协杯+英超',
            },

            {
                date: '2020第一期',
                status: false,
                price: 1560,
                category: '大小球',
                policy: '不中包退',
                games: '意甲+足协杯+英超',
            },

            {
                date: '2020第一期',
                status: true,
                price: 1560,
                category: '大小球',
                policy: '不中包退',
                games: '意甲+足协杯+英超',
            },

            {
                date: '2020第一期',
                status: true,
                price: 1560,
                category: '大小球',
                policy: '不中包退',
                games: '意甲+足协杯+英超',
            },

            {
                date: '2020第一期',
                status: true,
                price: 1560,
                category: '大小球',
                policy: '不中包退',
                games: '意甲+足协杯+英超',
            },

            {
                date: '2020第一期',
                status: false,
                price: 1560,
                category: '大小球',
                policy: '不中包退',
                games: '意甲+足协杯+英超',
            },

            {
                date: '2020第一期',
                status: false,
                price: 1560,
                category: '大小球',
                policy: '不中包退',
                games: '意甲+足协杯+英超',
            },

            {
                date: '2020第一期',
                status: false,
                price: 1560,
                category: '大小球',
                policy: '不中包退',
                games: '意甲+足协杯+英超',
            },
        ]

    },

    'B': {

        bgUrl: PlanBBg,
        title: '打包盈利计划',
        desc: '每个方案精选5-10场比赛',
        add: '每单场不中包退至余额，单场价值300金币',
        infoPath: '',

        plans: [
            {
                date: '2020第一期',
                status: true,
                price: 1560,
                category: '大小球',
                policy: '不中包退',
                games: '意甲+足协杯+英超',
            },

            {
                date: '2020第一期',
                status: true,
                price: 1560,
                category: '大小球',
                policy: '不中包退',
                games: '意甲+足协杯+英超',
            },

            {
                date: '2020第一期',
                status: true,
                price: 1560,
                category: '大小球',
                policy: '不中包退',
                games: '意甲+足协杯+英超',
            },

            {
                date: '2020第一期',
                status: false,
                price: 1560,
                category: '大小球',
                policy: '不中包退',
                games: '意甲+足协杯+英超',
            },

            {
                date: '2020第一期',
                status: false,
                price: 1560,
                category: '大小球',
                policy: '不中包退',
                games: '意甲+足协杯+英超',
            },

            {
                date: '2020第一期',
                status: false,
                price: 1560,
                category: '大小球',
                policy: '不中包退',
                games: '意甲+足协杯+英超',
            },


        ]

    }

}

class AIPlanContainer extends React.Component {

    constructor(props) {
        super(props)
        this.planType = this.props.match.params.planType
    }

    render() {

        const {
            title,
            bgUrl,
            desc,
            add,
            infoPath,
            plans,
        } = planMapper[this.planType]

        const header = <div className='ai-plan-header-ctn'>
            <img src={bgUrl} alt=''/>
            <span className='ai-plan-header-desc'>{desc}</span>
            <span className='ai-plan-header-add'>{add}</span>
            {infoPath ? <Link to={'../plan-attention/' + this.planType}><span
                className='ai-plan-header-attention'
            >策略及注意事项 >></span></Link> : null}
        </div>

        const tabs = [
            {title: '全部', value: 'all',},
            {title: '可购买', value: 'available',},
            {title: '已截止', value: 'closed',}
        ]

        const main = <div className='ai-plan-main-ctn'>
            <TabWithCustomUnderline
                tabs={tabs}
                animated={false}
            >
                <AIPlanList
                    planList={plans}
                    filter='all'
                />
                <AIPlanList
                    planList={plans}
                    filter='available'
                />
                <AIPlanList
                    planList={plans}
                    filter='closed'
                />
            </TabWithCustomUnderline>
        </div>


        return <GoBackLayout
            title={title}
            history={this.props.history}
        >
            <WingBlank>
                <div className='ai-plan-detail-ctn'>
                    {header}
                    {main}
                </div>
            </WingBlank>
        </GoBackLayout>
    }
}

export default withRouter(AIPlanContainer)
